<!-- 基础：3、模板语法 插值 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：3、模板语法 插值</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- 文本 -->
		<span>Message: {{ msg }}</span><br/>
		<!-- 使用v-once指令来执行一次性插值，这样即使实例数据发生改变，插值处的内容也不会更新
		     可以打开浏览器console控制台，输入app.msg = 'xxx'，发现使用v-once指令的地方数据不会改变
		 -->
		<span v-once>Never change Message: {{ msg }}</span>

		<!-- 纯HTML -->
		<!-- 使用v-html指令来实现将data数据解析为纯HTML，但不要随意使用，因为可能导致XSS攻击 -->
		<div v-html="rawHtml"></div>

		<!-- 属性 -->
		<!-- 使用v-bind指令将实例数据渲染到HTML属性中来 -->
		<div v-bind:id="id">v-bind测试</div>

		<!-- 使用Javascript表达式，但是只能是单个表达式不能是语句 -->
		<p>{{ number + 1 }}</p>  
		<p>{{ ok ? 'YES' : 'NO' }}</p>
		<p>{{ message.split('').reverse().join('') }}</p>
		<p v-bind:id="'list-'+id">Javascript表达式测试</p>
	</div>

	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				msg: 'Hello Vue!',
				rawHtml: '<span>vue is a good technology!</span>',
				id: 'testid',
				number: 10,
				ok: true,
				message: 'Hello Vue!'
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->